/*
 * @Author: 刘炳全 2889637201@qq.com
 * @Date: 2024-03-24 15:22:05
 * @LastEditors: 刘炳全 2889637201@qq.com
 * @LastEditTime: 2024-03-25 22:35:25
 * @FilePath: /exe-three/01-react-app/src/App.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import * as React from "react";
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh,
  AxesHelper,
} from "three";
import { OrbitControls} from 'three/examples/jsm/controls/OrbitControls' // 导入轨道控制器

class App extends React.Component {
  render() {
    return <div></div>;
  }
  componentDidMount() {
    // 创建场景
    const scene = new Scene();

    // 创建相机
    const camera = new PerspectiveCamera(
      45, // 视角
      window.innerWidth / window.innerHeight, //宽高比
      0.1, //近平面
      1000 // 远平面
    );

    // 创建渲染
    const renderer = new WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement); // 将canvas画布追加到页面

    // 创建几何体
    const geometry = new BoxGeometry();
    // 创建材质
    const parentMeteral = new MeshBasicMaterial({color: 0xff0000});
    const meterial = new MeshBasicMaterial({ color: 0x00ff00 });
     // 创建网络
    const parentCube = new Mesh(geometry, parentMeteral);
    const cube = new Mesh(geometry, meterial);
    parentCube.add(cube);
    parentCube.position.set(-3, 0, 0);
    cube.position.set(3, 0, 0); // 子cube的位置是基于父cube，类似相对定位

    cube.scale.set(2,2,2)

    // 绕x轴旋转
    cube.rotation.x = Math.PI / 8;  // 父元素转动，子会随着叠加
    parentCube.rotation.x = Math.PI / 8;

    // 将网络添加到场景中
    scene.add(parentCube);

    // 设置相机的位置
    camera.position.x = 2; // x轴-红色
    camera.position.y = 2; // y轴-绿色
    camera.position.z = 5; // z轴-蓝色
    camera.lookAt(3, 0, 0); // 默认

    // 添加世界坐标辅助器
    const axesHelper = new AxesHelper(5);
    scene.add(axesHelper);

    // 添加轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);

    controls.enableDamping = true;  // 设置带阻尼惯性
    controls.dampingFactor = 0.05;  // 设置阻尼特性
    // controls.autoRotate = true;  // 设置旋转速度
    // 渲染函数
    function animate() {
      controls.update();

      requestAnimationFrame(animate);
      // 旋转
      // cube.rotation.x += 0.01;
      // cube.rotation.y += 0.01;
      // 渲染
      renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', () => {
      const w = window.innerWidth;
      const h = window.innerHeight;
      renderer.setSize(w, h); // 重置渲染器宽高比
      camera.aspect = w / h;  // 重置相机宽高比
      camera.updateProjectionMatrix();  // 更新相机投影矩阵
    });
  }
}

export default App;
